<template>
<div>
    <h1>当前求和为：{{ sum }}</h1>
    <h1>当前求和放大10倍为：{{ bigSum }}</h1>
    <h1>我在{{ school }}，学习{{ subject }}</h1>
    <h1>下方组件总人数{{personList.length}}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数在加</button>
    <button @click="decrementWait(n)">等一等在加</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: 'Count',
  data(){
    return {
      n:1
    }
  },
  computed:{
    // sum(){
    //   return this.$store.state.sum
    // },
    // school(){
    //   return this.$store.state.school
    // },
    // subject(){
    //   return this.$store.state.subject
    // },
    //对象写法
    // ...mapState({sum:'sum',school:'school',subject:'subject'}),
    ...mapState('countAbout',['sum','school','subject']),
    ...mapState('personAbout',['personList']),
    ...mapGetters('countAbout',['bigSum'])
    // bigSum(){
    //   return this.$store.getters.bigSum
    // },
  },
  methods:{
    // increment(){
    //   // this.sum+=this.n
    //   // console.log(this)
    //   // this.$store.dispatch('jia',this.n)
    //   this.$store.commit('JIA',this.n)
    // },
    // decrement(){
    //   // this.sum-=this.n
    //   // this.$store.dispatch('jian',this.n)
    //   this.$store.commit('JIAN',this.n)
    // },
    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

    // incrementOdd(){
    //   // if(this.$store.state.sum % 2){
    //   //   this.$store.dispatch('jia',this.n)
    //   // }
    //   this.$store.dispatch('jiaOdd',this.n)
    // },
    // decrementWait(){
    //   // setTimeout(() => {
    //   //   this.$store.dispatch('jia',this.n)
    //   // }, 1000);
    //   this.$store.dispatch('jiaWait',this.n)
    // }
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',decrementWait:'jiaWait'})
  }
}
</script>